<template>
  <!-- 积分详情 页面 -->
  <view style="margin: 30rpx;background-color: #f9f9f9;">
    <!-- 业主信息 -->
    <!-- 整个box -->
    <view class="box">
      <view class="box1">
        <view>
          <view class="text">业主姓名：</view>
          <view>{{userInfo.name}}</view>
        </view>
        <view>
          <view class="text">手机号码：</view>
          <view>{{userInfo.tel}}</view>
        </view>
        <view>
          <view class="text">家庭住址：</view>
          <view>{{userInfo.address}}</view>
        </view>
        <view class="zjf-text">总积分:</view>
        <view class="zjf-value" style="color: #ff0000;">{{userInfo.sumValue!==null?userInfo.sumValue:0}}</view>
      </view>
    </view>
    <!--选项卡： 打卡获得，兑换减少 -->
    <view>
      <u-subsection :list="xuanXiangList" mode="subsection" :current="subCurrent" @change="xuanXiangChange">
      </u-subsection>
    </view>
    <!-- 垃圾分类打卡积分列表 -->
    <view class="refuse-class-list" v-if="subCurrent===0">
      <my-refuseclassification-item :refuseclass="item" v-for="(item,index) in refuseclassList" :key="index">
      </my-refuseclassification-item>
    </view>
    <!-- 积分兑换明细列表 -->
    <view class="refuse-class-list" v-if="subCurrent===1">
      <my-integral-item :integral="item" v-for="(item,index) in integralList" :key="index"></my-integral-item>
    </view>


  </view>
</template>

<script>
  // 按需导入 mapState ,mapMutations,mapGetters 辅助函数
  import {
    mapState,
    mapMutations,
    mapGetters
  } from 'vuex'
  export default {
    data() {
      return {
        xuanXiangList: ['分类打卡明细', '商城兑换明细'],
        subCurrent: 0, //选项卡下标
        refuseclassList: [], //垃圾分类明细
        integralList: [], //积分商城兑换明细
        // 是否正在请求数据    节流阀（防止短时间内重复请求）
        isloading: false,
      };
    },
    computed: {
      // 将 m_user 模块中的 userType 数据映射到当前页面中使用
      ...mapState('m_user', ['userType', 'userInfo']),
    },
    onLoad() {
      // 获取 垃圾分类打卡 列表数据
      this.getRefuseClassList();
      // 获取积分兑换明细 列表
      this.getIntegralList();
    },
    methods: {
      // 选择 0: 分类打卡明细   or  1: 商城兑换明细
      xuanXiangChange(index) {
        this.subCurrent = index;
      },
      // 获取 垃圾分类打卡 列表数据
      async getRefuseClassList(cb) {
        // ** 打开节流阀
        this.isloading = true
        const {
          data: res
        } = await uni.$http.post('/refuseclassification/getrefuseclassificationlistbyuid', this.userInfo.id)
        // ** 关闭节流阀
        this.isloading = false
        // 只要数据请求完毕，就立即按需调用 cb 回调函数,cb() 是关闭下拉刷新的
        cb && cb()
        if (res.status !== 200) return uni.$showMsg()
        // 图片url处理
        var tempDataList = res.data;
        for (var i = 0; i < tempDataList.length; i++) { //循环遍历tempRefuseclassList，对每个tempRefuseclass进行操作
          if (tempDataList[i].img != null) {
            var imgArr = tempDataList[i].img.split(";"); //将数据库中的url字符串用；分割为数组
            tempDataList[i].img = []; //重新初始化为数组
            for (var j = 0; j < imgArr.length - 1; j++) { //j<imgArr.length-1  是为了除去最后一个空元素
              tempDataList[i].img[j] = imgArr[j];
            }
          }
        }
        this.refuseclassList = tempDataList;
      },
      // 获取积分兑换明细 列表
      async getIntegralList(cb) {
        // ** 打开节流阀
        this.isloading = true
        const {
          data: res
        } = await uni.$http.post('/integral/getlistbyuid', this.userInfo.id)
        // ** 关闭节流阀
        this.isloading = false
        // 只要数据请求完毕，就立即按需调用 cb 回调函数,cb() 是关闭下拉刷新的
        cb && cb()
        if (res.status !== 200) return uni.$showMsg()
        // 图片url处理
        var tempIntegralList = res.data;
        for (var i = 0; i < tempIntegralList.length; i++) { //循环遍历tempRefuseclassList，对每个tempRefuseclass进行操作
          if (tempIntegralList[i].img !== null) {
            var imgArr = tempIntegralList[i].img.split(";");
            tempIntegralList[i].img = imgArr[0];
          }
        }
        this.integralList = tempIntegralList;
      },
      // 下拉刷新的事件
      onPullDownRefresh() {
        // 1. 重置关键数据
        this.isloading = false
        this.refuseclassList = [];
        this.integralList = [];
        // 2. 重新发起请求   传参（关闭下拉刷新，因为默认不关闭）
        this.getRefuseClassList(() => uni.stopPullDownRefresh())
        this.getIntegralList(() => uni.stopPullDownRefresh())
      },
    },
  }
</script>

<style lang="scss">
  .box {
    // padding: 30rpx;
  }

  .box1,
  .box2 {
    border-radius: 30rpx;
    margin-bottom: 30rpx;
    padding: 25rpx;
    box-shadow: 0 0 15rpx #999999;
  }

  .box1>view,
  .box2>view {
    padding: 10rpx;
    display: flex;
    margin-bottom: 10rpx;
    font-family: Microsoft YaHei;

    color: #333333;
  }

  .text {
    width: 30%;
    text-align: left;
    overflow: auto;
  }

  .refuse-class-list {
    // background-color: #007AFF;
    width: 100%;
  }

  .zjf-text {
    position: absolute;
    top: 60rpx;
    right: 90rpx;
    font-weight: bold;
  }

  .zjf-value {
    position: absolute;
    top: 130rpx;
    right: 100rpx;
    color: #ff0000;
    font-weight: bold;
  }

  // .bxstatus {
  //   width: 110rpx;
  //   height: 50rpx;
  //   background-color: #fef7e5;
  //   font-size: 32rpx;
  //   color: #fdcd65;
  //   font-weight: bold;
  //   position: relative;
  //   border-radius: 5rpx;
  // }
</style>
